<template>
  <f7-page>
    <f7-navbar :title="$t('m.co1')" back-link=" "></f7-navbar>

    <div class="content-padding margin-t20">
      <div class="product-item margin-b20">
        <img :src="product.pic" alt="">
        <div>
          <h3>{{product.name}}</h3>
          <h2>{{product.price}} {{$t('m.m2')}}</h2>

        </div>
      </div>
      <div class="my-card no-padding">
        <f7-list>
          <f7-list-item :title="$t('m.co2')" link @click="selectAddress" class="address-list-item">
            <p slot="after" class="address-after">{{selectedAddress.address}}</p>
          </f7-list-item>
        </f7-list>
      </div>
    </div>

    <f7-toolbar bottom class="bottom-buttons-toolbar">
      <f7-button fill class="no-border-radius" @click="handleSubmitOrder">{{$t('m.co3')}}</f7-button>
    </f7-toolbar>
  </f7-page>
</template>

<script>
  import { addOrder } from "../api/find";

  export default {
    name: "confirm-order",
    computed: {
      product() {
        return this.$f7route.context.good;
      },
      selectedAddress() {
        return this.$store.state.selectedAddress || {};
      }
    },
    methods: {
      selectAddress () {
        this.$f7router.navigate('/mall-address/');
      },
      handleSubmitOrder() {
        const obj = {
          good_id: this.product.id,
          address_id: this.selectedAddress.id
        }
        console.log(obj);
        addOrder(obj).then(() => {
          // this.$f7router.back('/', {force: true, animate: false});
          setTimeout(() => {
            this.$f7router.navigate('/orders/')
          }, 100)
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .address-list-item {
    /deep/ .item-after {
      flex: 1;
    }
  }
  .address-after {
    white-space: normal;
    font-size: 25px!important;
  }
</style>
